<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>支持移动手机的canvas刮刮卡插件</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    	<link rel="stylesheet" href="css/style.css">
	<!--[if IE]>
		<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		
		    <div class="max-width">
		    	<p>在这个例子中，当你刮开90%的面积时，回调函数就会被执行。</p>
		        <div class="scratch_container">
		            <div class="scratch_viewport">
		                <canvas id="js-scratch-canvas"></canvas>
		            </div>
		        </div>
		    </div>
		
	</div>
	
	<script src="js/Scratch.js"></script>
	<script type="text/javascript">

        var scratch = new Scratch({
            canvasId: 'js-scratch-canvas',
            imageBackground: './images/win.jpg',
            pictureOver: './images/foreground.jpg',
            cursor: {
                png: './images/piece.png',
                cur: './images/piece.cur',
                x: '20',
                y: '17'
            },
            radius: 20,
            nPoints: 100,
            percent: 90,
            callback: function () {
                alert('I am Callback.');
            },
            pointSize: { x: 3, y: 3}
        });

    </script>
   
</body>
</html>